import { ActionApi } from "@/api";
import { Button } from "@mui/material";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import List from "./components";
import "./style.less";
// 试题分类数组
const tipType: KeyMap[] = [
  {
    key: "全部",
    value: "all",
  },
  {
    key: "错误",
    value: "err",
  },
  {
    key: "已做",
    value: "done",
  },
  {
    key: "没做",
    value: "notdone",
  },
];
// 题目数量数组
const TestNums: KeyMap[] = [
  { key: "5", value: "5" },
  { key: "10", value: "10" },
  { key: "20", value: "20" },
  { key: "30", value: "30" },
  { key: "50", value: "50" },
  { key: "100", value: "100" },
];

// 定义一个数组转换
const responArr: IndexMap = {
  all: "全部",
  qa: "问答",
  code: "变成",
  fill: "填空",
  one: "单选",
  check: "判断",
  many: "多选",
};

export default function Select() {
  const { actionCode } = useParams();
  const navigate = useNavigate();
  const [typedata, setTypedata] = useState<KeyMap[]>([]);

  const [testType, setTestType] = useState("all");
  const [questionType, setQuestionType] = useState("all");
  const [testNum, setTestNum] = useState(0);

  useEffect(() => {
    ActionApi(actionCode).then((res) => {
      // console.log(res);
      if (res.errCode === 0) {
        const temp = res.data.map((item) => ({
          key: responArr[item.key] + item.value,
          value: item.key,
        }));
        setTypedata(temp);
      }
    });
  }, []);

  const btnClick = () => {
    navigate("/practise", {
      state: { actionCode, testNum, testType, questionType },
    });
  };

  return (
    <div style={{ backgroundColor: "#fff" }}>
      <div className="btn">
        <Button variant="contained" fullWidth onClick={() => btnClick()}>
          进入练习模式
        </Button>
        <Button variant="contained" fullWidth color="warning">
          进入考试模式
        </Button>
      </div>

      <List
        title="试题分类"
        list={tipType}
        onChange={(value) => console.log(value)}
      />
      <List
        title="题目分类"
        list={typedata}
        onChange={(value) => console.log(value)}
      />
      <List
        title="做题数量"
        list={TestNums}
        onChange={(value) => console.log(value)}
      />
    </div>
  );
}
